<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head  th:fragment="head">
    <title>JPetStore</title>
    <link rel="StyleSheet" href="/css/jpetstore.css" type="text/css" media="screen" />
    <meta charset="utf-8"/>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <style>
        .search-tips{
            background: darkgray;
            display: flex;
            flex-direction: column;
            width: 120px;
            position: absolute;
            margin-top: -3ex;
            height: 100px;
            overflow-y: auto;
            overflow-x: hidden;

        }
        .search-tips>div{
            line-height: 1.5em;
            height: 1.5em;
            text-align: left;
            padding-left: 1em;
            cursor: pointer;
        }
        .search-tips>div:hover{
            background: #7ccdcd;
        }
    </style>
    <script>
        const ServerApi="/api/";

        var is_tips_over=false;
        var timer;

        function search_focus(){
            $(".search-tips").show();
        }
        function search_blur(){
            $(".search-tips").hide();
        }
        function search_input(){
            var keyword=$("#keyword").val();
            console.log(keyword);
            if(keyword){
                ShowAllItemsServlet(keyword);
            }
        }
        function ShowAllItemsServlet(keyword){
            $.ajax({
                url:ServerApi+"ShowAllItemsServlet",
                data:{
                    keyword:keyword
                },
                success:function(res){
                    res=JSON.parse(res);
                    if(res.status!=200){
                        error(res.msg);
                    } else {
                        var items=res.data.Items;
                        $(".search-tips").empty();
                        for(let i of items){
                            console.log(i,`<div>${i}</div>`);
                            $(".search-tips").append(`<div>${i}</div>`);
                        }
                        $(".search-tips>div").on("mousedown",function (){
                            console.log("click")
                            // throw "ddd"
                            $("#keyword").val(this.innerText);
                            $("#keyword")[0].oninput();
                            // $("#keyword").focus();
                        })
                    }
                },
                error:function (){
                    error("服务器异常");
                }
            })
        }

        function error(msg){
            // alert(msg);
            console.log(msg)
        }

    </script>
</head>
<body>
         <header th:fragment="header">
             <div id="Header">

                 <div id="Logo">
                     <div id="LogoContent">
                         <a href="/catalog/MainController"><img src="/images/logo-topbar.gif" /></a>
                     </div>
                 </div>

                 <div id="Menu">
                     <div id="MenuContent">
                         <a href="/cart/CartController"><img align="middle" name="img_cart" src="../images/cart.gif" /></a>
                         <img align="middle"src="../images/separator.gif" />
                         <a href="/account/SelfController" th:text="|账户(${session.user.nickName})|"></a>
                         <img align="middle" src="../images/separator.gif" />
                         <a href="/account/LoginoutController">退出登录</a>
                         <img align="middle" src="../images/separator.gif" />
                         <a href="/order/OrderController">订单</a>
                     </div>
                 </div>

                 <div id="Search">
                     <div id="SearchContent">
                         <form action="/catalog/SearchItemsController" method="post">
                             <div style="display: inline-block;">
                                 <input type="text" id="keyword" name="keyword" required size="14" oninput="search_input()"  onfocus="search_focus()"  onblur="search_blur()" autocomplete="off"/>
                                 <div class="search-tips" style="display: none">
                                 </div>
                             </div>
                             <input type="submit" name="searchProducts" value="Search" />
                         </form>
                     </div>
                 </div>

                 <div id="QuickLinks">
                     <a href="/category?categoryId=FISH" style="visibility: hidden;"><span>fish</span></a><!--占位!-->
                 </div>

             </div>

         </header>
</body>
</html>